import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useLocation, useNavigate } from 'react-router-dom';
import { NavBar, Space, Toast,ActionSheet, Button, Dialog } from 'antd-mobile';
import { CloseOutline, MoreOutline, CheckOutline } from 'antd-mobile-icons';
import tx from './6.jpg'
import style from  '../lyf/Detail.module.css'

export default function Detail() {
  const navigate = useNavigate();
  const location = useLocation();
  // 尝试从本地存储获取id，如果没有则从url获取
  const storedId = localStorage.getItem('itemid');
  const urlId = location.search.split('=')[1];
  const id = storedId || urlId;
  const [detailc, setDetailc] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [visible, setVisible] = useState(false);
  // 根据状态动态显示样式，3表示已通过，4表示已拒绝
  const [yes,setyes]=useState(false)//同意
  const [no,setnos]=useState(false)//不同意


  const back = () => {
    navigate('/zhu/xiaoxi')
  };

  const getqing = () => {
    if (!id) {
      setError('ID参数无效');
      setLoading(false);
      return;
    }

    // 使用新的API直接根据ID获取详情
    axios.get(`http://localhost:3111/chuchai/detail/${id}`)
      .then(res => {
        if (res.data.code === 200) {
          setDetailc(res.data.data);
        } else {
          setError('获取数据失败');
        }
      })
      .catch(err => {
        console.error('获取出差详情失败:', err);
        setError('获取数据失败');
      })
      .finally(() => {
        setLoading(false);
      });
  };

  useEffect(() => {
    getqing();
  }, [id]);

  // 根据获取的状态设置显示样式
  useEffect(() => {
    if (detailc && detailc.zhuangtai) {
      if (detailc.zhuangtai === '3') {
        setyes(true);
        setnos(false);
      } else if (detailc.zhuangtai === '4') {
        setyes(false);
        setnos(true);
      }
    }
  }, [detailc]);

  useEffect(() => {
    // 如果从url获取到id，将其存入本地存储
    if (urlId) {
      localStorage.setItem('detailItemId', urlId);
    }
  }, [urlId]);

  if (loading) {
    return <div>加载中...</div>;
  }

  if (error) {
    return <div className="error">{error}</div>;
  }

  if (!detailc) {
    return <div>未找到对应数据</div>;
  }

  return (
    <div>
      <NavBar onBack={back}>出差详情</NavBar>
      <p style={{ fontSize: '15px', marginLeft: '10px', color: 'rgb(61,158,109)' }}>申报人信息</p>
      <div className={style.xinxi}>
        <div style={{ display: 'flex' }}>
          <img src={tx} className={style.toux} />
          <p style={{ fontSize: '25px', marginTop: '50px', marginLeft: '10px' }}>{detailc.username}</p>
        </div>
        <div style={{ marginLeft: '20px' }}>
          <p className={style.jingli}>{detailc.zhiye}<br />Managere</p>
          <p style={{ fontSize: '18px', marginTop: '15px', marginLeft: '10px' }}>所属部门：{detailc.bumen}</p>
        </div>
      </div>
      <p style={{ fontSize: '15px', marginLeft: '10px', color: 'rgb(61,158,109)', marginTop: '20px' }}>出差详情</p>
      <hr style={{ marginTop: '10px' }} />
      <p style={{ fontSize: '16px', marginLeft: '20px', color: 'rgb(180,180,180)', marginTop: '10px' }}>申请时间：2025-5-10</p>
      <ul className={style.detail}>
        <li>出差类型：{detailc.chailvleixing}</li>
        <li>调休日期：{detailc.CFtime}</li>
        <li>出行方式：{detailc.CXfangshi}</li>
        <li>开始时间：{detailc.CFtime}</li>
        <li>结束时间：{detailc.FHtime}</li>
        <li>出差原因：{detailc.yuanyin}</li>
      </ul>
      {/* 已同意样式 */}
      {
        yes && <div>
            <div className={style.liucheng}>
                <div style={{display:'flex'}}>
                <img src={tx} />
                <div style={{marginLeft:'10px',marginTop:'50px'}}>
                    <span style={{fontSize:'18px',color:'rgb(51,102,204)',fontWeight:'bolder'}}>同意</span><span style={{fontWeight:'bolder',fontSize:'15px'}}>自动审批</span><br />
                    <span style={{color:'grey'}}>直接上级审批 雷静 2025-05-11 18:20:36</span>
                </div>
                
                </div>
                <div style={{display:'flex'}}>
                <img src={tx} />
                <div style={{marginLeft:'10px',marginTop:'50px'}}>
                <span style={{fontSize:'18px',color:'rgb(51,102,204)',fontWeight:'bolder'}}>同意</span><span style={{fontWeight:'bolder',fontSize:'15px'}}>手动审批</span><br />
                <span style={{color:'grey'}}>行政专员审批 张三 2021-05-11 20:10:18</span>
                    </div>
                </div>
                <div style={{display:'flex'}}>
                <p className={style.no}><CheckOutline /></p>
                <div style={{marginLeft:'10px',marginTop:'50px'}}> 
                    <span style={{fontSize:'18px',color:'rgb(51,102,204)',fontWeight:'bolder'}}>已通过</span><br/>
                    <span style={{color:'grey'}}>审批通过流程完成2025-05-12 08:10:20</span>
                </div>
                </div>
            </div>
            <div className={style.liu}></div>
            <div className={style.liu2}></div>
        </div>
      }
      
      {/* 已拒绝样式 */}
      {
      no && <div>
          <div className={style.liucheng}>
        <div style={{display:'flex'}}>
          <img src={tx} />
          <div style={{marginLeft:'10px',marginTop:'50px'}}>
            <span style={{fontSize:'18px',color:'rgb(51,102,204)',fontWeight:'bolder'}}>同意</span><span style={{fontWeight:'bolder',fontSize:'15px'}}>自动审批</span><br />
            <span style={{color:'grey'}}>直接上级审批 雷静 2025-05-11 18:20:36</span>
          </div>
          
        </div>
        <div style={{display:'flex'}}>
          <img src={tx} />
          <div style={{marginLeft:'10px',marginTop:'50px'}}>
          <span style={{fontSize:'18px',color:'red',fontWeight:'bolder'}}>拒绝</span><span style={{fontWeight:'bolder',fontSize:'15px'}}>手动审批</span><br />
          <span style={{color:'grey'}}>行政专员<span style={{color:'red'}}>拒绝</span> 张三 2021-05-11 20:10:18</span>
            </div>
        </div>
        <div style={{display:'flex'}}>
          <p className={style.yes}><CloseOutline /></p>
          <div style={{marginLeft:'10px',marginTop:'50px'}}> 
            <span style={{fontSize:'18px',color:'red',fontWeight:'bolder'}}>已拒绝</span><br/>
            <span style={{color:'grey'}}>审批通过流程完成2025-05-12 08:10:20</span>
          </div>
        </div>
      </div>
      <div className={style.liu}></div>
      <div className={style.liu2}></div>
      </div>
      }
    </div>
  );
}